<template>
  <div class="dashboard">
    <!-- 动态渲染对应的仪表盘 -->
    <component :is="currentDashboard" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import useUserStore from '../store/modules/user';
// 总经理仪表盘
import GeneralManager from './dashboard/generalManager/index.vue';
// 销售仪表盘
import SalesManager from './dashboard/sale/index.vue';
// 业务经理仪表盘
import BusinessManager from './dashboard/businessManager/index.vue';
// 客服仪表盘
import CustomerService from './dashboard/customer/index.vue';
// 欢迎页面
import Welcome from '../components/welcome/index.vue';

const userApp = useUserStore();

const roleMap: Record<string, any> = {
  boss: GeneralManager, //  总经理
  admin: GeneralManager //  总经理
  // saleManager: BusinessManager, // 业务经理
  // saleUser: SalesManager, // 销售人员
  // customerService: CustomerService, // 客服
};

// 动态计算当前用户应该展示的仪表盘
const currentDashboard = computed(() => {
  const roles = userApp.roles || []; // 假设 store 里有 roles 数组
  for (const r of roles) {
    if (roleMap[r]) return roleMap[r];
  }
  return Welcome; // 默认给个欢迎页面
});
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
  background-color: #edf4ff;
  padding: 20px;
  box-sizing: border-box;
}
</style>
